<template>
  <div class="container">
    <div class="productList">
    <el-input v-model="query.key" placeholder="按关键字输入" @change="keyChange"></el-input>
    <div class="sorts"> 
      <span :class="{sort:true,active:query.sorted==0}" @click="changeSorted(0)">综合</span>
      <span :class="{sort:true,active:query.sorted==1}" @click="changeSorted(1)">销量</span>
      <span v-if="query.sorted==2" :class="{sort:true,active:query.sorted==2}" @click="changeSorted(3)">价格↓</span>
      <span v-else :class="{sort:true,active:query.sorted==3}" @click="changeSorted(2)">价格↑</span>
      <span class="sort" @click="selectBrand()">全部品牌</span>
    </div>
    <div class="brand-container" ref="name"> 
     
      <div :class="{brand:true,active:brand.selected}" @click="changeBrand(brand)"     v-for="brand in brands" :key="brand._id"> 
        <img :src="brand.img">
        <div class="brand-name">
          {{ brand.name }}
        </div>
        
    </div>
    <span @click="clear()" class="clear">清空</span>
    <span @click="ok()" class="ok">确定</span>
    <span @click="back()" class="back">收回</span>
    </div>
      <div v-for="product in rows" :key="product._id" class="product-container" @click="goProduct(product.productId)"> 
        <!-- {{ product.total }} -->
        <img :src="product.productImg"/>
       <div class="product-name">
        <p>{{ product.productName }}</p>
      </div>
      <div class="product-sales">
        <p>${{ product.sales }}</p>
      </div>
      </div>
  </div>
</div>
  
</template>

<script>
import api from '../api'
export default {
     data () {
      return {
        value: '',
        total:0,
        rows:[],
        brands:[],
        num:'2',
        query:{
          key:'',
          brandIds:'',
          sorted:0,
          pageNum:1
        }
      }
     },
     methods:{
      goProduct(productId) {
          this.$router.push({
            path:'/product',
            query:{productId}
          })
      },
      changeBrand(brand) {
          brand.selected = !brand.selected
      },
      changeSorted(sorted) {
        this.query.sorted = sorted
        this.getList()
      },
      selectBrand() {
          if(this.num %2 ==0){
            this.$refs.name.style.display ='block'
          }else{
            this.$refs.name.style.display = 'none'
          }
           this.num++
          
       
        
      },
      back(){
          this.$refs.name.style.display = 'none'
      },
        getList() {
          this.$http({
            url:'/products',
            params:this.query
          }).then(res =>{
            if(res.errorMsg ) {
              this.total = 0
              this.rows = []
            }else{
              this.total = res.total
              for(let i =0;i<res.rows.length;i++) {
                let imgs =  res.rows[i].productImgs.split(',')
                res.rows[i].productImg = api.baseURL+imgs[0]
              }
             this.rows = res.rows
            }
             
          })
        },
        keyChange() {
        this.getList()
        
        },
        getBrands() {
          this.$http({
            url:'/brands'
          }).then(res => {
            for(let i = 0;i<res.length;i++) {
              let img = res[i].img.split(',')
              res[i].img = api.baseURL+img[0]
              res[i].selected = false
            }
            this.brands = res
          })
        },
        clear() {
          for(let i =0;i<this.brands.length;i++) {
            this.brands[i].selected = false
          
          }
          this.query.brandIds = ''
          this.getList()
        },
        ok() {
          let brandIds = []
          for(let i =0;i<this.brands.length;i++) {
            if(this.brands[i].selected) {
              brandIds.push(this.brands[i]._id)
            }
          }
          this.query.brandIds = brandIds.join(',')
          this.getList()
        }
     },
     mounted(){
       let query = this.$route.query
       this.query.key = query.key || ''
       this.getList()
       this.getBrands()
      
     }
}
</script>

<style>
.back{
  font-size: 14px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;
position: absolute;
top: 100px;
right: 50px;
}
.clear {
  font-size: 14px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;
position: absolute;
top: 100px;
left: 40px;
}
.ok{
  font-size: 14px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;
position: absolute;
top: 100px;
left: 80px;
}
.container {
  font-size: 36px;
  width: 375px;
  height: 1350px;
background: #F5F5F5;

}
.productList input {
  width: 270px;
  height: 34px;
  margin-left: 53px;
  margin-top: 49px;
}
.sorts {
  display: flex;
  width: 355px;
height: 45px;
background: #FFFFFF;
border-radius: 10px 10px 10px 10px;
opacity: 1;
margin-left: 10px;
margin-top: 14px;
}
.sort {
  flex: 1;
  font-size: 14px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #707070;
  text-align: center;
  line-height: 45px;
}
.sort.active {
  color: brown;
}
.brand-container {
  display: none;
  position: relative;
  width: 355px;
  height: 120px;
  margin-left: 10px;
  background-color:#FFFFFF;
  margin-top: 8px;
}
.brand {
  float: left;
  position: relative;
  width: 40px;
  height: 80px;
  margin-left: 40px;
}
.brand img{
  width: 30px;
  height: 30px;
}
.brand-name {
  font-size: 10px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;
position: absolute;
top: 50px;
left: 0px;
}
.brand.active {
  color: brown;
}
.product-container {
  float: left;
  position: relative;
  width: 174px;
height: 189px;
background: #FFFFFF;
border-radius: 5px 5px 5px 5px;
opacity: 1;
margin-left: 10px;
margin-top: 8px;
}
.product-container img {
  width: 154px;
  height: 110px
}
.product-name p {
  position: absolute;
  top:127px;
  left:10px;
  font-size: 16px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;

}
.product-sales p {
  position: absolute;
  top: 155px;
  left: 10px;
  font-size: 14px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #F86D1C;

}
</style>